<!DOCTYPE html>
<html lang="en-us">
	<head>
		<meta charset="utf-8">
		<title> SmartAdmin </title>
		<meta name="description" content="">
		<meta name="author" content="">
			
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		
		<!-- #CSS Links -->
		<!-- Basic Styles -->
		<link rel="stylesheet" type="text/css" media="screen" href="/static/css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" media="screen" href="/static/css/font-awesome.min.css">

		<!-- SmartAdmin Styles : Caution! DO NOT change the order -->
		<link rel="stylesheet" type="text/css" media="screen" href="/static/css/smartadmin-production-plugins.min.css">
		<link rel="stylesheet" type="text/css" media="screen" href="/static/css/smartadmin-production.min.css">
		<link rel="stylesheet" type="text/css" media="screen" href="/static/css/smartadmin-skins.min.css">

		<!-- SmartAdmin RTL Support -->
		<link rel="stylesheet" type="text/css" media="screen" href="/static/css/smartadmin-rtl.min.css">

		<!-- We recommend you use "your_style.css" to override SmartAdmin
		     specific styles this will also ensure you retrain your customization with each SmartAdmin update.
		<link rel="stylesheet" type="text/css" media="screen" href="/static/css/your_style.css"> -->

		<!-- Demo purpose only: goes with demo.js, you can delete this css when designing your own WebApp -->
		<link rel="stylesheet" type="text/css" media="screen" href="/static/css/demo.min.css">

		<!-- #FAVICONS -->
		<link rel="shortcut icon" href="/static/img/favicon/favicon.ico" type="image/x-icon">
		<link rel="icon" href="/static/img/favicon/favicon.ico" type="image/x-icon">

		<!-- #GOOGLE FONT -->
		<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,300,400,700">

		<!-- #APP SCREEN / ICONS -->
		<!-- Specifying a Webpage Icon for Web Clip 
			 Ref: https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html -->
		<link rel="apple-touch-icon" href="/static/img/splash/sptouch-icon-iphone.png">
		<link rel="apple-touch-icon" sizes="76x76" href="/static/img/splash/touch-icon-ipad.png">
		<link rel="apple-touch-icon" sizes="120x120" href="/static/img/splash/touch-icon-iphone-retina.png">
		<link rel="apple-touch-icon" sizes="152x152" href="/static/img/splash/touch-icon-ipad-retina.png">
		
		<!-- iOS web-app metas : hides Safari UI Components and Changes Status Bar Appearance -->
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		
		<!-- Startup image for web apps -->
		<link rel="apple-touch-startup-image" href="/static/img/splash/ipad-landscape.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)">
		<link rel="apple-touch-startup-image" href="/static/img/splash/ipad-portrait.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">
		<link rel="apple-touch-startup-image" href="/static/img/splash/iphone.png" media="screen and (max-device-width: 320px)">


		<style type="text/css">
			/* Apply these styles only when #preview-pane has
			 been placed within the Jcrop widget */
			.jcrop-holder #preview-pane {
				display: block;
				position: absolute;
				z-index: 200;
				right: -280px;
				padding: 3px;
				border: 1px rgba(0,0,0,.4) solid;
				background-color: white;
				-webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.1);
				-moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.1);
				box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.1);
			}

			/* The Javascript code will set the aspect ratio of the crop
			 area based on the size of the thumbnail preview,
			 specified here */
			#preview-pane .preview-container {
				width: 250px;
				height: 170px;
				overflow: hidden;
			}
			
			.optdual {
				position: relative;
			}
			.optdual .offset {
				position: absolute;
				left: 18em;
			}
			.optlist label {
				width: 16em;
				display: block;
			}
			#dl_links {
				margin-top: .5em;
			}

		</style>

	</head>
	
	<!--

	TABLE OF CONTENTS.
	
	Use search to find needed section.
	
	===================================================================
	
	|  01. #CSS Links                |  all CSS links and file paths  |
	|  02. #FAVICONS                 |  Favicon links and file paths  |
	|  03. #GOOGLE FONT              |  Google font link              |
	|  04. #APP SCREEN / ICONS       |  app icons, screen backdrops   |
	|  05. #BODY                     |  body tag                      |
	|  06. #HEADER                   |  header tag                    |
	|  07. #PROJECTS                 |  project lists                 |
	|  08. #TOGGLE LAYOUT BUTTONS    |  layout buttons and actions    |
	|  09. #MOBILE                   |  mobile view dropdown          |
	|  10. #SEARCH                   |  search field                  |
	|  11. #NAVIGATION               |  left panel & navigation       |
	|  12. #RIGHT PANEL              |  right panel userlist          |
	|  13. #MAIN PANEL               |  main panel                    |
	|  14. #MAIN CONTENT             |  content holder                |
	|  15. #PAGE FOOTER              |  page footer                   |
	|  16. #SHORTCUT AREA            |  dropdown shortcuts area       |
	|  17. #PLUGINS                  |  all scripts and plugins       |
	
	===================================================================
	
	-->
	
	<!-- #BODY -->
	<!-- Possible Classes

		* 'smart-style-{SKIN#}'
		* 'smart-rtl'         - Switch theme mode to RTL
		* 'menu-on-top'       - Switch to top navigation (no DOM change required)
		* 'no-menu'			  - Hides the menu completely
		* 'hidden-menu'       - Hides the main menu but still accessable by hovering over left edge
		* 'fixed-header'      - Fixes the header
		* 'fixed-navigation'  - Fixes the main menu
		* 'fixed-ribbon'      - Fixes breadcrumb
		* 'fixed-page-footer' - Fixes footer
		* 'container'         - boxed layout mode (non-responsive: will not work with fixed-navigation & fixed-ribbon)
	-->
	<body class="">

        {% include "common/common.html" %}

		<!-- MAIN PANEL -->
		<div id="main" role="main">

            {% include "common/topnav.html" %}
			
			<!-- MAIN CONTENT -->
			<div id="content">
				{% include "common/commoncontent.html" %}

				<!--
				The ID "widget-grid" will start to initialize all widgets below
				You do not need to use widgets if you dont want to. Simply remove
				the <section></section> and you can use wells or panels instead
				-->

				<!-- widget grid -->
				<section id="widget-grid" class="">

					<!-- row -->
					<div class="row">

						<!-- NEW WIDGET START -->
						<article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

							<div class="alert alert-danger hidden-lg hidden-md hidden-sm">
								<b>Please note:</b>
								This plugin is non-responsive
							</div>

							<!-- Widget ID (each widget will need unique ID)-->

							<div class="jarviswidget jarviswidget-sortable" id="wid-id-0" data-widget-togglebutton="false" data-widget-editbutton="false" data-widget-fullscreenbutton="false" data-widget-colorbutton="false" data-widget-deletebutton="false" role="widget" style="">
								<!-- widget options:
								usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">

								data-widget-colorbutton="false"
								data-widget-editbutton="false"
								data-widget-togglebutton="false"
								data-widget-deletebutton="false"
								data-widget-fullscreenbutton="false"
								data-widget-custombutton="false"
								data-widget-collapsed="true"
								data-widget-sortable="false"

								-->
								<header role="heading">
									<span class="widget-icon"> <i class="fa fa-file-image-o txt-color-darken"></i> </span>
									<h2 class="hidden-xs hidden-sm">jcrop </h2>

									<ul class="nav nav-tabs pull-right in" id="myTab">
										
										<li class="active">
											<a data-toggle="tab" href="#s1"><i class="fa fa-crop text-success"></i> <span class="hidden-mobile hidden-tablet">API</span></a>
										</li>
										
										<li>
											<a data-toggle="tab" href="#s2"><i class="fa fa-crop text-primary"></i> <span class="hidden-mobile hidden-tablet">Default</span></a>
										</li>

										<li>
											<a data-toggle="tab" href="#s3"><i class="fa fa-crop text-warning"></i> <span class="hidden-mobile hidden-tablet">Basic</span></a>
										</li>

										<li>
											<a data-toggle="tab" href="#s4"><i class="fa fa-crop text-danger"></i> <span class="hidden-mobile hidden-tablet">Aspect Ratio</span></a>
										</li>

										<li>
											<a data-toggle="tab" href="#s5"><i class="fa fa-crop txt-color-purple"></i> <span class="hidden-mobile hidden-tablet">Animations</span></a>
										</li>

										<li>
											<a data-toggle="tab" href="#s6"><i class="fa fa-crop txt-color-pink"></i> <span class="hidden-mobile hidden-tablet">Styling</span></a>
										</li>

									</ul>

									<span class="jarviswidget-loader"><i class="fa fa-refresh fa-spin"></i></span>
								</header>

								<!-- widget div-->
								<div role="content">
									<!-- widget edit box -->

									<div class="widget-body">
										<!-- content -->
										<div id="myTabContent" class="tab-content">

											<!-- new tab: API interface -->
											<div class="tab-pane fade clearfix active in" id="s1">

												<h4 class="margin-bottom-10">API Interface — real-time API example</h4>
												
												<div class="alert alert-info">
													<b>Experimental shader active.</b>
													Jcrop now includes a shading mode that facilitates building
													better transparent Jcrop instances. The experimental shader is less
													robust than Jcrop's default shading method and should only be
													used if you require this functionality.
													<br>
													View jcrop's documentation by going to: <a href="http://deepliquid.com/content/Jcrop.html" target="_blank">http://deepliquid.com/content/Jcrop.html</a>
												</div>
												
												<img src="/static/img/superbox/superbox-full-7.jpg" id="target-5" alt="[Jcrop Example]" class="pull-left" />
						
												<div class="pull-left padding-gutter padding-top-0 padding-bottom-0 jcrop-api-tabs-options">
													
													<fieldset>

														<legend>
															Option Toggles
														</legend>										

														<span class="requiresjcrop">
															<button id="setSelect" class="btn btn-default btn-sm">
																setSelect
															</button>
															<button id="animateTo" class="btn btn-default btn-sm">
																animateTo
															</button>
															<button id="release" class="btn btn-default btn-sm">
																Release
															</button>
															<button id="disable" class="btn btn-default btn-sm">
																Disable
															</button> 
														</span>
														<button id="enable" class="btn btn-default btn-sm" style="display:none;">
															Re-Enable
														</button>
														<button id="unhook" class="btn btn-default btn-sm">
															Destroy!
														</button>
														<button id="rehook" class="btn btn-default btn-sm" style="display:none;">
															Attach Jcrop
														</button>
													</fieldset>
													
													<fieldset class="optdual requiresjcrop">
														<legend>
															Option Toggles
														</legend>
														<div class="optlist offset">
															<label class="margin-top-0">
															  <input type="checkbox" class="checkbox style-0" id="ar_lock">
															  <span>Aspect ratio</span>
															</label>
															
															<label class="">
															  <input type="checkbox" class="checkbox style-0" id="size_lock">
															  <span>minSize/maxSize setting</span>
															</label>
														</div>
														<div class="optlist">
															<label class="margin-top-0">
															  <input type="checkbox" class="checkbox style-0" id="can_click">
															  <span>Allow new selections</span>
															</label>
															
															<label class="">
															  <input type="checkbox" class="checkbox style-0" id="can_move">
															  <span>Selection can be moved</span>
															</label>
															
															<label class="">
															  <input type="checkbox" class="checkbox style-0" id="can_size">
															  <span>Resizable selection</span>
															</label>

														</div>
													</fieldset>
						
													<fieldset class="requiresjcrop changeImages">
														<legend>
															Change Image
														</legend>
														<div class="btn-group">
															<button class="btn btn-default" id="img2">
																Lego
															</button>
															<button class="btn btn-default active" id="img1">
																Breakdance
															</button>
															<button class="btn btn-default" id="img3">
																Dragon Fly
															</button>
														</div>
													</fieldset>
												
												</div>	

											</div>
											<!-- end s1 tab pane -->

											<!-- new tab: Default -->
											<div class="tab-pane clearfix fade" id="s2">

												<h4 class="margin-bottom-10">Default Behaviour</h4>

												<div class="alert alert-info">
													<b>This example demonstrates the default behavior of Jcrop.</b>
													<br />
													Since no event handlers have been attached it only performs
													the cropping behavior.
												</div>

												<img src="/static/img/superbox/superbox-full-11.jpg" id="target" alt="[Jcrop Example]" />

											</div>
											<!-- end s1 tab pane -->

											<!-- new tab: Basic handler -->
											<div class="tab-pane clearfix fade" id="s3">

												<h4 class="margin-bottom-10">Basic Handler — basic form integration</h4>

												<div class="alert alert-info">
													<b>An example with a basic event handler.</b> Here we've tied
													several form values together with a simple event handler invocation.
													The result is that the form values are updated in real-time as
													the selection is changed using Jcrop's <em>onChange</em> handler.
												</div>

												<!-- This is the image we're attaching Jcrop to -->
												<img src="/static/img/superbox/superbox-full-10.jpg" id="target-2" alt="[Jcrop Example]" />

												<!-- This is the form that our event handler fills -->
												<form id="coords"
												class="coords margin-top-10"
												onsubmit="return false;"
												action="http://example.com/post.php">

													<div class="inline-labels">
														<label>X1
															<input type="text" size="4" id="x1" name="x1" />
														</label>
														<label>Y1
															<input type="text" size="4" id="y1" name="y1" />
														</label>
														<label>X2
															<input type="text" size="4" id="x2" name="x2" />
														</label>
														<label>Y2
															<input type="text" size="4" id="y2" name="y2" />
														</label>
														<label>W
															<input type="text" size="4" id="w" name="w" />
														</label>
														<label>H
															<input type="text" size="4" id="h" name="h" />
														</label>
													</div>
												</form>

											</div>
											<!-- end s2 tab pane -->

											<!-- new tab: Aspect ratio -->
											<div class="tab-pane clearfix fade" id="s4">

												<h4 class="margin-bottom-10">Aspect Ratio w/ Preview Pane — nice visual example</h4>

												<div class="alert alert-info">
													<b>An example implementing a preview pane.</b>
													Obviously the most visual demo, the preview pane is accomplished
													entirely outside of Jcrop with a simple jQuery-flavored callback.
													This type of interface could be useful for creating a thumbnail
													or avatar. The onChange event handler is used to update the
													view in the preview pane.
												</div>

												<img src="/static/img/superbox/superbox-full-9.jpg" id="target-3" alt="[Jcrop Example]" />

											</div>
											<!-- end s3 tab pane -->

											<!-- new tab: animation/transitions -->
											<div class="tab-pane clearfix fade" id="s5">

												<h4 class="margin-bottom-10">Animation/Transitions — animation/fading demo</h4>

												<div class="alert alert-info">
													<b>Experimental shader active.</b>
													Jcrop now includes a shading mode that facilitates building
													better transparent Jcrop instances. The experimental shader is less
													robust than Jcrop's default shading method and should only be
													used if you require this functionality.
												</div>

												<div class="row">

													<div class="col-sm-12 col-md-12 col-lg-12">

														<img src="/static/img/superbox/superbox-full-7.jpg" id="target-4" alt="Jcrop Image" class="pull-left" />

							
														<div id="interface" class="pull-left padding-gutter padding-top-0 padding-bottom-0">
															<p>
																<label>
																  <input type="checkbox" class="checkbox style-0" id="fadetog">
																  <span>Enable fading (bgFade: true)</span>
																</label>
															</p>
															<p>
															<label>
															  <input type="checkbox" class="checkbox style-0" id="shadetog">
															  <span>Use experimental shader (shade: true)</span>
															</label>
															</p>
														
														</div>
													</div>

												</div>

											</div>
											<!-- end s4 tab pane -->

											<!-- new tab: Styling -->
											<div class="tab-pane fade clearfix padding-10 no-padding-bottom" id="s6">

												<h4 class="margin-bottom-10">Styling Example — style Jcrop dynamically with CSS</h4>

												<img src="/static/img/superbox/superbox-full-16.jpg" id="target-6" alt="[Jcrop Example]" />
						
												<div class="pull-left pull-left padding-gutter padding-top-0 padding-bottom-0">
													<fieldset>
														<legend>
															Manipulate classes
														</legend>
														<div class="btn-group" id="buttonbar">
															<button class="btn btn-default active" data-setclass="jcrop-light" id="radio1">
																jcrop-light
															</button>
															<button class="btn btn-default" data-setclass="jcrop-dark" id="radio2">
																jcrop-dark
															</button>
															<button class="btn btn-default" data-setclass="jcrop-normal" id="radio3">
																normal
															</button>
														</div>
													</fieldset>
												</div>

											</div>
											<!-- end s6 tab pane -->

										</div>

										<!-- end content -->
									</div>

								</div>
								<!-- end widget div -->
							</div>
							<!-- end widget -->

						</article>
						<!-- WIDGET END -->

					</div>

					<!-- end row -->

				</section>
				<!-- end widget grid -->
			</div>
			<!-- END MAIN CONTENT -->

		</div>
		<!-- END MAIN PANEL -->



		<!--================================================== -->

		<!-- PACE LOADER - turn this on if you want ajax loading to show (caution: uses lots of memory on iDevices)-->
		<script data-pace-options='{ "restartOnRequestAfter": true }' src="/static/js/plugin/pace/pace.min.js"></script>

		<!-- Link to Google CDN's jQuery + jQueryUI; fall back to local -->
		{% include "common/basejs.html" %}

		<!-- IMPORTANT: APP CONFIG -->
		<script src="/static/js/app.config.js"></script>

		<!-- JS TOUCH : include this plugin for mobile drag / drop touch events-->
		<script src="/static/js/plugin/jquery-touch/jquery.ui.touch-punch.min.js"></script>

		<!-- BOOTSTRAP JS -->
		<script src="/static/js/bootstrap/bootstrap.min.js"></script>

		<!-- CUSTOM NOTIFICATION -->
		<script src="/static/js/notification/SmartNotification.min.js"></script>

		<!-- JARVIS WIDGETS -->
		<script src="/static/js/smartwidgets/jarvis.widget.min.js"></script>

		<!-- EASY PIE CHARTS -->
		<script src="/static/js/plugin/easy-pie-chart/jquery.easy-pie-chart.min.js"></script>

		<!-- SPARKLINES -->
		<script src="/static/js/plugin/sparkline/jquery.sparkline.min.js"></script>

		<!-- JQUERY VALIDATE -->
		<script src="/static/js/plugin/jquery-validate/jquery.validate.min.js"></script>

		<!-- JQUERY MASKED INPUT -->
		<script src="/static/js/plugin/masked-input/jquery.maskedinput.min.js"></script>

		<!-- JQUERY SELECT2 INPUT -->
		<script src="/static/js/plugin/select2/select2.min.js"></script>

		<!-- JQUERY UI + Bootstrap Slider -->
		<script src="/static/js/plugin/bootstrap-slider/bootstrap-slider.min.js"></script>

		<!-- browser msie issue fix -->
		<script src="/static/js/plugin/msie-fix/jquery.mb.browser.min.js"></script>

		<!-- FastClick: For mobile devices -->
		<script src="/static/js/plugin/fastclick/fastclick.min.js"></script>

		<!--[if IE 8]>

		<h1>Your browser is out of date, please update your browser by going to www.microsoft.com/download</h1>

		<![endif]-->

		<!-- Demo purpose only -->
		{% include "common/javascript.html" %}

		<!-- MAIN APP JS FILE -->
		<script src="/static/js/app.min.js"></script>

		<!-- ENHANCEMENT PLUGINS : NOT A REQUIREMENT -->
		<!-- Voice command : plugin -->
		<script src="/static/js/speech/voicecommand.min.js"></script>

		<!-- SmartChat UI : plugin -->
		<script src="/static/js/smart-chat-ui/smart.chat.ui.min.js"></script>
		<script src="/static/js/smart-chat-ui/smart.chat.manager.min.js"></script>

		<!-- PAGE RELATED PLUGIN(S) 
		<script src="..."></script>-->

		<script src="/static/js/plugin/jcrop/jquery.Jcrop.min.js"></script>
		<script src="/static/js/plugin/jcrop/jquery.color.min.js"></script>

		<script type="text/javascript">
			
			$(document).ready(function() {
				pageSetUp();


				//console.log("load and ready");


				// default
				
				var default_handler = function(){
					$('#target').Jcrop();
				}

				var basic_handler = function() {

					var jcrop_api;

					$('#target-2').Jcrop({
						onChange : showCoords,
						onSelect : showCoords,
						setSelect: [ 48, 34, 391, 302, 343, 268 ]
					}, function() {
						jcrop_api = this;
					});

					$('#coords').on('change', 'input', function(e) {
						var x1 = $('#x1').val(), x2 = $('#x2').val(), y1 = $('#y1').val(), y2 = $('#y2').val();
						jcrop_api.setSelect([x1, y1, x2, y2]);
					});

					// Simple event handler, called from onChange and onSelect
					// event handlers, as per the Jcrop invocation above
					function showCoords(c) {
						$('#x1').val(c.x);
						$('#y1').val(c.y);
						$('#x2').val(c.x2);
						$('#y2').val(c.y2);
						$('#w').val(c.w);
						$('#h').val(c.h);
					};

					function clearCoords() {
						$('#coords input').val('');
					};

				};


				// aspect ratio

				var aspect_ratio = function() {
					var thumbnail, jcrop_api;
  
					  // Instantiate Jcrop
					  $('#target-3').Jcrop({
					    aspectRatio: 3/2,
					    setSelect: [ 0, 50, 250, 170 ]
					  },function(){
					    var jcrop_api = this;
					    thumbnail = this.initComponent('Thumbnailer', { width: 250, height: 170 });
					    this.ui.preview = thumbnail;
					  });
				}
				// end aspect_ratio



				var animation_handler = function() {

					var jcrop_api;

					$('#target-4').Jcrop({
						bgFade : true,
						bgOpacity : .8,
						setSelect : [60, 70, 540, 330]
					}, function() {
						jcrop_api = this;
					});

					$('#fadetog').change(function() {
						jcrop_api.setOptions({
							bgFade : this.checked
						});
					}).attr('checked', 'checked');

					$('#shadetog').change(function() {
						if (this.checked)
							$('#shadetxt').slideDown();
						else
							$('#shadetxt').slideUp();
						jcrop_api.setOptions({
							shade : this.checked
						});
					}).attr('checked', false);

					// Define page sections
					var sections = {
						bgc_buttons : 'Change bgColor',
						bgo_buttons : 'Change bgOpacity',
						anim_buttons : 'Animate Selection'
					};
					// Define animation buttons
					var ac = {
						anim1 : [50, 50, 300, 300],
						anim2 : [20, 20, 560, 360],
						anim3 : [70, 70, 256, 276],
						anim4 : [150, 100, 200, 200],
						anim5 : [136, 55, 372, 183]
					};
					// Define bgOpacity buttons
					var bgo = {
						Low : .8,
						Mid : .5,
						High : .2,
						Full : 0
					};
					// Define bgColor buttons
					var bgc = {
						R : '#900',
						B : '#4BB6F0',
						Y : '#F0B207',
						G : '#46B81C',
						W : 'white',
						K : 'black'
					};
					// Create fieldset targets for buttons
					for (i in sections)insertSection(i, sections[i]);

					function create_btn(c) {
						var $o = $('<button />').addClass('btn btn-default btn-small');
						if (c)
							$o.append(c);
						return $o;
					}

					var a_count = 1;
					// Create animation buttons
					for (i in ac) {
						$('#anim_buttons .btn-group').append(create_btn(a_count++).click(animHandler(ac[i])), ' ');
					}

					$('#anim_buttons .btn-group').append(create_btn('Bye!').click(function(e) {
						$(e.target).addClass('active');
						$(e.target).closest('.btn-group').find('.active').removeClass('active');
						jcrop_api.animateTo([300, 200, 300, 200]);
						return false;
					}));

					// Create bgOpacity buttons
					for (i in bgo) {
						$('#bgo_buttons .btn-group').append(create_btn(i).click(setoptHandler('bgOpacity', bgo[i])), ' ');
					}
					// Create bgColor buttons
					for (i in bgc) {
						$('#bgc_buttons .btn-group').append(create_btn(i).css({
							background : bgc[i],
							color : ((i == 'K') || (i == 'R')) ? 'white' : 'black'
						}).click(setoptHandler('bgColor', bgc[i])), ' ');
					}
					// Function to insert named sections into interface
					function insertSection(k, v) {
						$('#interface').prepend($('<fieldset></fieldset>').attr('id', k).append($('<legend></legend>').append(v), '<div class="btn-toolbar"><div class="btn-group"></div></div>'));
					};
					// Handler for option-setting buttons
					function setoptHandler(k, v) {
						return function(e) {
							$(e.target).closest('.btn-group').find('.active').removeClass('active');
							$(e.target).addClass('active');
							var opt = { };
							opt[k] = v;
							jcrop_api.setOptions(opt);
							return false;
						};
					};
					// Handler for animation buttons
					function animHandler(v) {
						return function(e) {
							$(e.target).addClass('active');
							$(e.target).closest('.btn-group').find('.active').removeClass('active');
							jcrop_api.animateTo(v);
							return false;
						};
					};

					$('#bgo_buttons .btn:first,#bgc_buttons .btn:last').addClass('active');
					$('#interface').show();

				}
				// end animation_handler

				// styling_handler
				var styling_handler = function () {
					var api;
					$('#target-6').Jcrop({
						// start off with jcrop-light class
						bgOpacity : 0.5,
						bgColor : 'white',
						addClass : 'jcrop-light'
					}, function() {
						api = this;
						api.setSelect([130, 65, 130 + 350, 65 + 285]);
						api.setOptions({
							bgFade : true
						});
						
					});
					$('#buttonbar').on('click', 'button', function(e) {
						var $t = $(this), $g = $t.closest('.btn-group');
						$g.find('button.active').removeClass('active');
						$t.addClass('active');
						$g.find('[data-setclass]').each(function() {
							var $th = $(this), c = $th.data('setclass'), a = $th.hasClass('active');
							if (a) {
								switch(c) {

									case 'jcrop-light':
										api.setOptions({
											bgColor : 'white',
											bgOpacity : 0.5
										});
										break;

									case 'jcrop-dark':
										api.setOptions({
											bgColor : 'black',
											bgOpacity : 0.8
										});
										break;

									case 'jcrop-normal':
										api.setOptions({
											bgColor : $.Jcrop.defaults.bgColor,
											bgOpacity : $.Jcrop.defaults.bgOpacity
										});
										break;
								}
							} 
								
						});
					});

				};
				function random_coords() {
			      return [
			        Math.random()*300,
			        Math.random()*200,
			        (Math.random()*400),
			        (Math.random()*300)
			      ];
			    }

				var api_handler = function() {
					// The variable jcrop_api will hold a reference to the
					// Jcrop API once Jcrop is instantiated.
					var cb;
					$('#target-5').Jcrop({
						}, function() {
							interface_load(this);
					});
					function interface_load(obj){
						cb = obj;
						cb.newSelection();
						cb.setSelect(random_coords());
						 function run_cleanup(){
					      var m = cb.ui.multi, s = cb.ui.selection;
					      
					      for(var i=0;i<m.length;i++)
					        if (s !== m[i]) m[i].remove();
					        
					      cb.ui.multi = [ s ];
					      s.center();
					      s.focus();
					    }
						$('.jcrop-api-tabs-options').on('click', 'button', function () {
							id = $(this).attr('id');
							switch(id){
								case 'setSelect':
									cb.setSelect(random_coords());
									break;
								case 'animateTo':
									cb.animateTo(random_coords());
									break;
								case 'release':
									cb.setOptions({setSelect: null});
									run_cleanup();
									break;
								case 'disable' : 
									cb.setOptions(allOptions(false));
									$('#enable').show();
									$('.requiresjcrop').hide();
								break;
								case 'enable' :
									cb.setOptions(allOptions(true));
									console.log(allOptions(true));
									$('#enable').hide();
									$('.requiresjcrop').show();
								break;
								case 'unhook' :
									cb.destroy();
									$('#unhook,.requiresjcrop,#enable').hide();
									$('#rehook').show();
								break;
								case 'rehook' :									
									api_handler();
									$('#rehook').hide();
									$('#unhook,.requiresjcrop').show();
								break;
							}
						})
						function allOptions(boolean) {
						 	var array = {
								canResize : boolean,
								allowSelect: boolean,
								canDrag: boolean,
								canResize: boolean
							};
							return array;
						};
						function checked(element) {
							return document.getElementById(element).checked;
						}
						$('.optlist').on('change', 'input[type="checkbox"]', function () {
							id = $(this).attr('id');
							switch(id){
								case 'can_click':
									cb.setOptions({
										allowSelect: checked(id) ? true : false
									});
									break;
								case 'ar_lock' : 
									cb.setOptions({
										aspectRatio: checked(id) ? 5/3 : false
									});
									break;
								case 'can_move' : 
									cb.setOptions({
										canDrag : checked(id) ? true : false
									});
									break;
								case 'can_size' : 
									cb.setOptions({
										canResize : checked(id) ? true : false
									});
									break;
								case 'size_lock' : 
									cb.setOptions({
										minSize: checked(id) ? [100,100]: [50,50],
										maxSize: checked(id) ? [400,350]: [0,0]
									});
									break;
								

							}

						});
						function checkActive(element,cl) {
							if($(element).hasClass(cl)){
								return true;
							}else{
								$(element).parent().children().removeClass(cl);
								$(element).addClass(cl);
								return true;
							}
						}
						$('.changeImages').on('click', 'button', function () {
							var id = $(this).attr('id');
							checkActive(this, 'active');
							switch(id){
								case 'img1':
									cb.setImage('img/superbox/superbox-full-7.jpg', function () {
										cb.destroy();
										api_handler();
									});
								break;
								case 'img2':
									cb.setImage('img/superbox/superbox-full-24.jpg',function () {
										cb.destroy();
										api_handler();
									});
								break;
								case 'img3':
									cb.setImage('img/superbox/superbox-full-20.jpg');
									cb.destroy();
									api_handler();
								break;
							}
						})
						
					}
				};
				$('#can_click, #can_move, #can_size').attr('checked','checked');
				basic_handler();
				default_handler();
				api_handler();
				styling_handler();
				animation_handler();
				aspect_ratio();
				
			});

		</script>

		<!-- Your GOOGLE ANALYTICS CODE Below -->
		<script type="text/javascript">
			var _gaq = _gaq || [];
				_gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
				_gaq.push(['_trackPageview']);
			
			(function() {
				var ga = document.createElement('script');
				ga.type = 'text/javascript';
				ga.async = true;
				ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
				var s = document.getElementsByTagName('script')[0];
				s.parentNode.insertBefore(ga, s);
			})();

		</script>

	</body>

</html>